<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" href="../css/main.css"/>
    <link rel="stylesheet" href="../css/shop_cart_edit.css"/>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-top">
    <a class="aui-pull-left aui-btn go-back" >
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">购物车</div>
    <div class="aui-pull-right goJieSuan">完成</div>

</header>
<section id="app" v-cloak>
    <ul class="aui-list aui-media-list">
        <li class="aui-list-item" v-for="goods,index in goodsList" >
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" v-on:click="checkItem(index)">
                    <label class="check-radio"><input class="aui-radio" type="radio"  v-bind:checked="goods.isChecked" > </label>
                    <img v-bind:src="goods.goodsImg">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">{{goods.goodsName}}</div>
                        <div class="aui-list-item-right aui-font-size-16">{{goods.price*goods.goodsNum}}元</div>
                    </div>
                    <div class="aui-list-item-text">
                        {{goods.goodsDesc}}
                    </div>
                    <div class="aui-info" >
                        <div class="aui-bar aui-bar-btn"   type="count" >
                            <div class="aui-bar-btn-item aui-font-size-20 " v-on:click="muchOrLess(index,-1)">
                                <i class="aui-iconfont aui-icon-minus"></i>
                            </div>
                            <div class="aui-bar-btn-item">
                                <input type="number" class="aui-input aui-text-center"  v-model="goods.goodsNum">
                            </div>
                            <div class="aui-bar-btn-item aui-font-size-20"  v-on:click="muchOrLess(index,1)">
                                <i class="aui-iconfont aui-icon-plus"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

    <footer class="aui-bar aui-bar-tab" id="footer">
        <div  class="aui-flex-item-12">
            <ul class="aui-flex-col">
                <li class="aui-flex-item-3" v-on:click="isAllChose()">
                    <input class="aui-radio" type="radio" v-bind:checked="isAllChoseGoods">
                    全选
                </li>
                <li class="aui-flex-item-3 aui-flex-offset-6" v-on:click="">
                    <input class="aui-btn aui-btn-danger deleteBtn" type="button" value="删除">
                </li>
            </ul>
        </div>
    </footer>
</section>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/aui-tab.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/aui-list-swipe-backup.js"></script>
<script type="text/javascript" src="../js/shop_cart_edit.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../js/weixin.js" ></script>
<script type="text/javascript">
    var xpHome = new Vue({
        el:'#app',
        data:{
            goodsList:[],//商品列表
            countMoney:0,//合计
            isAllChoseGoods:false//是否全选
        },
        methods:{
            goHome:function(){//首页
                window.location.href = "../index.html";
            },

            getGoodsList:function(){//获取商品列表 demo
                var list = [
                    {
                        goodsName:"商品1",
                        goodsDesc:"这是商品1描述",
                        goodsImg:"../images/3.png",
                        goodsNum:1,
                        price:10,
                        isChecked:false
                    },
                    {
                        goodsName:"商品2",
                        goodsDesc:"这是商品2描述",
                        goodsImg:"../images/3.png",
                        goodsNum:2,
                        price:31,
                        isChecked:false
                    }
                ]
                $.ajax({
                    url:'http://www.pooai.cn/wx/frontend/web/index.php?r=goods%2Fgoods%2Fgoodslist',
                    type:'get',
                    dataType: 'JSONP',
                    success:function (data){
                        var mes = eval('('+data+')');
                        if(data && data.code == 200){


                        }
                        // console.log(mes)
                    },
                    error:function(){

                    }
                })
                xpHome.goodsList = list;
            },
            checkItem:function(index){//是否选中该商品
                xpHome.goodsList[index].isChecked =  !xpHome.goodsList[index].isChecked;
                if(!xpHome.goodsList[index].isChecked){//取消选中
                    xpHome.isAllChoseGoods = false;
                }
                xpHome.countMoneyFun();
            },
            muchOrLess:function(index,type){//添加或减少 商品   type 1添加  -1减少
                xpHome.goodsList[index].isChecked = true;
                if(type == 1){//添加  需要判断小于物品的总数
                    xpHome.goodsList[index].goodsNum +=1;
                }else{//减少  判断 >=1
                    if(xpHome.goodsList[index].goodsNum >1){
                        xpHome.goodsList[index].goodsNum -=1;
                    }
                }
                xpHome.countMoneyFun();
            },
            countMoneyFun:function(){//合计
                xpHome.countMoney = 0;
                for(var v=0;v<xpHome.goodsList.length;v++){ //待优化
                    var temp = xpHome.goodsList[v];
                    if(temp.isChecked){
                        xpHome.countMoney +=temp.goodsNum*temp.price;
                    }
                }
            },
            isAllChose:function(){ //是否全选
                xpHome.isAllChoseGoods = !xpHome.isAllChoseGoods;
                xpHome.countMoney = 0;
                for(var v=0;v<xpHome.goodsList.length;v++){ //待优化
                    var temp = xpHome.goodsList[v];
                    if(xpHome.isAllChoseGoods){ //全部选
                        temp.isChecked = true;
                    }else{//全部不选
                        temp.isChecked = false;
                    }
                    if(temp.isChecked){ //计算金额
                        xpHome.countMoney +=temp.goodsNum*temp.price;
                    }else{
                        xpHome.countMoney = 0;
                    }
                }

            }
        }
    });


    xpHome.getGoodsList();
    xpHome.countMoneyFun();
</script>
</body>
</html>